<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
      <strong>回收站</strong>
      <!-- <div class="right-num">
        <p @click="handleGetNotState">
          总数量：<span>{{ tableData.length }}</span>
        </p>
      </div> -->
    </h2>
    <RuifoxTable
      :loading="tableLoading"
      :table-data="tableData"
      :field-list="fieldList"
      :default-index="true"
      :default-checkbox="true"
    >
      <template #default-checkbox="{ element }">
        <div class="table-div-check">
          <el-checkbox
            class="unmover"
            v-model="element.checked"
            @change="handleCheckTable(element.id)"
            size=""
          />
        </div>
      </template>

      <!-- 设置热门 -->
      <template #isTop='{element}'>
        <div class="table-td-top">
          <span v-permission="['content:manage:top']" :class="{'ding-yes': element.isTop,'ding-no': !element.isTop}" @click="handleTop(element)">热</span>
        </div>
      </template>

      <!-- 内容列 -->
      <template #content="{ element }">
        <span class="content-text" @click="showDetail(element)">{{element.content?.content[0].value}}</span>
      </template>

      <!-- 创建时间列 -->
      <template #publishTime="{ element }">
        {{ dayjs(element.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>

      <!-- 回复状态列 -->
      <template #isReply="{ element }" >
        <el-tag v-if="element.isReply" type="success">已回复</el-tag>
        <el-tag v-else type="warning">待回复</el-tag>
      </template>

      <!-- 审核状态列 -->
      <template #state="{ element }">
        <div v-if="element.isDeleted == 0">
          <el-tag v-if="element.state == 3" type="warning">待审核</el-tag>
          <el-tag v-if="element.state == 1" type="success">审核通过</el-tag>
          <el-tag v-if="element.state == 0" type="danger">审核失败</el-tag>
          <span v-if="element.state == 99" style="color: #444;margin-left: 5px;">—</span>
        </div>
      </template>

      <!-- 公开状态列 -->
      <template #isOpen="{ element }" >
        <el-switch
          v-model="element.isOpen"
          :active-value="1"
          :inactive-value="0"
          :before-change="() => handleOpen(element)"
        />
      </template>

      <!-- 删除状态列 -->
      <template #isDeleted="{ element }" >
        <el-tag v-if="element.isDeleted" type="info">已删除</el-tag>
        <el-tag v-else type="success">正常</el-tag>
      </template>

      <!-- 回复时间列 -->
      <template #replyTime="{ element }">
        {{ dayjs(element.replyTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>

      <!-- 操作列 -->
      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button
            type="primary"
            size="small"
            link
            @click="showDetail(element)"
            >查看详情</el-button
          >
          <el-button
            type="primary"
            size="small"
            link
            @click="handleRecycleComment(element)"
            >恢复</el-button
          >
        </div>
      </template>
    </RuifoxTable>
    <PaginationView
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="handleGetFormManageList"
      @cancelChoose="handleResetPagination"
    />
    <!-- 留言详情  -->
    <el-dialog
      v-model="detailDialogVisible"
      title="留言详情"
      width="1000px"
      height="500px"
      class="comment-detail-dialog"
      >
      <el-scrollbar height="400px">
        <div class="comment-detail">
          <div class="main-comment">
            <!-- 留言标题栏 -->
            <div class="comment-title">
              <div class="left">
                <span class="label">留言人：</span>
                <span class="value">{{ currentDetail.user_name }}</span>
              </div>
            </div>
            <!-- 留言信息 -->
            <div class="comment-info">
              <div class="info-item">
                <span class="label">IP地址：</span>
                <span class="value">{{ currentDetail.ip }}</span>
              </div>
              <div class="info-item">
                <span class="label">留言时间：</span>
                <span class="value">{{
                  dayjs(currentDetail.publishTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </div>
              <div class="info-item">
                <span class="label">所属留言表：</span>
                <span class="value">{{ currentDetail.form_name }}</span>
              </div>
              <div class="info-item">
                <span class="label">所属分类：</span>
                <span class="value">{{ currentDetail.type_name }}</span>
              </div>
              <div class="info-item">
                <span class="label">留言内容：</span>
              </div>
            </div>
            <!-- 分割线 -->
            <el-divider style="margin-bottom: 15px;"/>
            <!-- 留言内容 -->
            <FormRenderer
              :fields="currentDetail.content.content"
              :model-value="{}"
              disabled
              label-width="100px"
            />
          </div>
        </div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRecycleComment(currentDetail)">恢复</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { 
  getRecycleComments, 
  recycleCommentById,
  batchRecoveryCommentMessages
} from "@/api/comment";
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from "element-plus";
import { tableList as mixTable } from "@ruifox-cms/utils";
import dayjs from "dayjs";
import FormRenderer from "../components/FormRenderer";

const store = useStore()

const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  checkedList,
  // getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: getRecycleComments,
});

const defaultQuery = reactive({
  total: 10,
  currentPage: 1,
  pageSize: 10,
  userId: store.state.base.userInfo.id
});

Object.assign(queryData, defaultQuery);
const tableData = ref([]);

//获取留言数据
const handleGetFormManageList = async () => {
  try {
    let res = await getRecycleComments(queryData);
    oriTableData.value = res.data.list;
    tableData.value = res.data.list;
    queryData.total = res.data.total;
  } catch (error) {
    ElMessage.error("获取数据失败",error);
  }
};
// 批量操作
const batchOptions = ref([
  { name: "恢复", value: "recycle", icon: "&#xe74b;" },
]);
const handleBatchOptions = (data) => {
  if (data === "recycle") {
    batchRecycle();
  }
};
// getTableData()
//恢复回收站留言
const handleRecycleComment = async (element) => {
  ElMessageBox.confirm("是否恢复该留言？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      let res = await recycleCommentById({
        id: element.id,
      });
      if (res.code == 20000) {
        ElMessage.success("恢复成功");
        handleGetFormManageList();
      }
    } catch (error) {
      ElMessage.error("恢复失败");
    }
  })
};
//批量恢复
const batchRecycle = async () => {
  ElMessageBox.confirm(
    '<div><p style="font-size: 16px;margin-bottom: 15px;">是否恢复所选留言？</p></div>',
    "恢复确认",
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    }
  ).then(() => {
    batchRecoveryCommentMessages(checkedList.value).then(() => {
      //更新节点
      handleResetPagination();
      // getTableData();
      handleGetFormManageList()
      ElMessage({
        showClose: true,
        message: "恢复成功",
        type: "success",
      });
    });
  });
};

// 添加详情相关的数据和方法
const detailDialogVisible = ref(false);
const currentDetail = ref({});
const showDetail = async (row) => {
  currentDetail.value = row;
  detailDialogVisible.value = true;
};


onMounted(async() => {
  await handleGetFormManageList()
})
//表格显示字段
const fieldList = ref([
  {
    title: "留言标题（点击查看详情）",
    name: "content",
    width: 250,
  },
  {
    title: "留言人",
    name: "user_name",
  },
  {
    title: "留言ip",
    name: "ip",
  },
  // {
  //   title: "删除时间",
  //   name: "publish_time",
  // },
  {
    title: "所属留言",
    name: "form_name",
  },
  {
    title: "所属分类",
    name: "type_name",
  },
  // {
  //   title: "删除人",
  //   name: "operate_username",
  // },
  {
    title: "操作",
    name: "options",
    width: 150,
    fixed: "right",
  },
]);

</script>
<style scoped>
/* .setting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right-num {
    display: flex;
    justify-content: end;
    p {
      font-size: 14px;
      padding: 6.5px 11px;
      color: var(--el-input-text-color, var(--el-text-color-regular));
      border-radius: var(
        --el-input-border-radius,
        var(--el-border-radius-base)
      );
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
        inset;
      margin-left: 10px;
      cursor: pointer;
      span {
        font-size: 18px;
        color: #333;
      }
    }
  }
} */
.content-text {
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  white-space: normal; 
  font-size: 12px !important;
  max-height: 36px;
  
}

.comment-detail {
  .comment-header {
    margin-bottom: 16px;

    .header-title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  .main-comment {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    .comment-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .left {
        display: flex;
        align-items: center;

        .label {
          color: #606266;
          margin-right: 8px;
        }

        .value {
          color: #303133;
        }
      }

      .right {
        display: flex;
        align-items: center;
        gap: 16px;
        button{
          font-size: 14px;
        }
      }
    }

    .comment-info {
      margin: 12px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .info-item {
        width: 48%;
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
          width: 100%;
        }

        .label {
          color: #606266;
          margin-right: 8px;
          min-width: 70px;
        }

        .value {
          color: #303133;
        }
      }
    }

    .comment-content {
      padding: 12px 0;

      :deep(*) {
        font-size: 14px !important;
        line-height: 1.6;
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
      }
    }
  }

  .reply-list {
    .reply-header {
      margin-bottom: 16px;

      .header-title {
        font-size: 18px;
        font-weight: 500;
        color: #303133;

        .count {
          font-size: 14px;
          color: #909399;
          margin-left: 4px;
          font-weight: normal;
        }
      }
    }

    .reply-items {
      .reply-item {
        padding: 16px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        background: #fff;
        transition: box-shadow 0.3s ease;

        &:hover {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
        }

        &:last-child {
          margin-bottom: 5px;
        }

        .reply-info {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .left {
            display: flex;
            align-items: center;
            gap: 24px;

            .username {
              color: #303133;
              font-size: 14px;
            }

            .time {
              color: #909399;
              font-size: 14px;
            }
          }
          .right{
            button{
              font-size: 14px;
              margin-left: 15px;
            }
          }
        }

        .el-divider {
          margin: 12px 0;
          border-top: 1px solid #f0f0f0;
        }

        .reply-content {
          :deep(*) {
            font-size: 14px !important;
            line-height: 1.6;
          }

          :deep(img) {
            max-width: 100%;
            height: auto;
          }
        }
        .audit-progress{
            margin-top: 10px;
            .audit-title{
              font-size: 16px;
              color: #333;
            }
            .audit-list{
              display: flex;
              margin-top: 10px;
              .audit-item{
                flex: 1;
                position: relative;
                &::after{
                    position: absolute;
                    left: 0;
                    top: 10px;
                    z-index: 1;
                    content: '';
                    height: 1px;
                    width: 100%;
                    background: #dddddd;
                  }
                  &:last-child{
                    &::after{
                      display: none;
                    }
                  }
                i{
                  font-size: 20px;
                  position: relative;
                  z-index: 3;
                }
                p{
                  margin-top: 5px;
                  &.username{
                    display: flex;
                    align-items: center;
                    i{
                      margin-left: 10px;
                      font-size: 18px;
                    }
                  }
                }
              }
            }
        }
      }
    }
  }
}
</style>